<template>
	<div class="container" style="margin-top: 40px" v-if="carouselList.length">
		<div id="certify">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide" v-for="(item, index) in carouselList" :key="item.colId"
						@click="onClickSlide(item)">
						<div style="position: relative;">
							<img :src="item.colCoverImg" />
							<span class="title">{{ item.colTitle }}</span>
						</div>
					</div>
				</div>
			</div>
			<!-- <div class="swiper-pagination"></div> -->
			<div class="swiper-button-prev1"></div>
			<div class="swiper-button-next1"></div>
		</div>
	</div>
</template>

<script>
import '@/assets/css/swiper.min.css'
import Swiper from '@/assets/js/swiper.min.js'
export default {
	data() {
		return {
			carouselList: [],
			activeIndex: 0,
			certifySwiper: null
		}
	},
	mounted() {
		this.getArticleCarousellist()
	},
	methods: {
		initSwiper() {
			this.certifySwiper = new Swiper('#certify .swiper-container', {
				watchSlidesProgress: true,
				slidesPerView: 'auto',
				centeredSlides: true,
				loop: true,
				loopedSlides: 3,
				autoplay: true,
				navigation: {
					nextEl: '.swiper-button-next1',
					prevEl: '.swiper-button-prev1',
				},
				// pagination: {
				// 	el: '.swiper-pagination',
				// 	//clickable :true,
				// },
				on: {
					progress: function (progress) {
						for (let i = 0; i < this.slides.length; i++) {
							var slide = this.slides.eq(i)
							var slideProgress = this.slides[i].progress
							let modify = 1
							if (Math.abs(slideProgress) > 1) {
								modify = (Math.abs(slideProgress) - 1) * 0.3 + 1
							}
							let translate = slideProgress * modify * 400 + 'px'
							let scale = 1 - Math.abs(slideProgress) / 3
							let zIndex = 999 - Math.abs(Math.round(10 * slideProgress))
							slide.transform('translateX(' + translate + ') scale(' + scale + ')')
							slide.css('zIndex', zIndex)
							slide.css('opacity', 1)
							if (Math.abs(slideProgress) > 2) {
								slide.css('opacity', 0)
							}
						}
					},
					setTransition: function (transition) {
						for (var i = 0; i < this.slides.length; i++) {
							var slide = this.slides.eq(i)
							slide.transition(transition)
						}
					},
					// slideChangeTransitionEnd: () => {
					// 	if (this.certifySwiper) {
					// 		// alert(this.certifySwiper.activeIndex % 3)
					// 	 	this.activeIndex = (this.certifySwiper.activeIndex % 3) + 1
					// 	}
					// },
				},
			})
		},
		getArticleCarousellist() {
			this.$api.articletype.getArticleCarousellist().then((res) => {
				const data = res.data
				if (data.code == 200) {
					this.carouselList = data.rows
					this.$nextTick(() => {
						this.initSwiper()
					})
				}
			})
		},
		onClickSlide(item) {
			this.$emit('onClick', item)
		},
	},
}
</script>

<style lang="scss" scoped>
#certify {
	width: 100%;
	position: relative;
}

#certify .swiper-container {
	padding-bottom: 60px;
}

#certify .swiper-slide {
	width: calc(100% - 100px);
}

#certify .swiper-slide img {
	display: block;
}

#certify .swiper-pagination-bullets .swiper-pagination-bullet-active {
	border: 3px solid #00aadc;
	background-color: #fff;
}

#certify .swiper-button-prev1 {
	position: absolute;
	z-index: 999;
	top: 40%;
	left: -20px;
	width: 45px;
	height: 45px;
	background: url(../../../assets/images/home/swiper_left.png) no-repeat;
	background-size: 100%;
}

#certify .swiper-button-next1 {
	position: absolute;
	z-index: 999;
	right: -20px;
	top: 40%;
	width: 45px;
	height: 45px;
	background: url(../../../assets/images/home/swiper_right.png) no-repeat;
	background-size: 100%;
}

.title {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 15px;
	font-size: 24px;
	color: white;
	background: rgba($color: #000000, $alpha: 0.5);
}
</style>
